<template>
  <div class="">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-button   @click="pulish" class="w150" type="success">添加角色</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" header-row-class-name="bgd8">
                    
                    <el-table-column  label="序号" type="index" > </el-table-column>
                    <el-table-column prop="name" label="角色名称" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="createTime" label="创建日期"> 
                        <template slot-scope="scope">
                               <span>{{scope.row.createTime|formatDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作 " width="250px">
                        <template slot-scope="scope">
                            <el-button type="success" size="small"  @click="edit2(scope.row)">分配权限</el-button>
                            <el-button type="info" size="small"  @click="edit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small"  @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
        </el-table>
         <el-pagination background  layout="prev, pager, next" :total="totalCount" @current-change="currentChange" @prev-click="prevClick" @next-click="nextClick"> </el-pagination>
        <el-dialog title="添加角色" class="w750" :visible.sync="dialogTableVisible">
          <el-form ref="ruleForm" :inline="true" :model="formData" class="msgform newstypeform" label-width="100px">
            <el-form-item label="角色名称" prop="name" class="formblock is-required">
              <el-input class="w300" v-model="formData.name"></el-input>
            </el-form-item>
            <el-button type="primary" class="w140" size="small" @click="onSubmit">确认</el-button>
          </el-form>
        </el-dialog>

        <el-dialog title="分配权限" width="450px" :visible.sync="dialogTableVisible2">
          <el-checkbox-group class="panel"  v-model="checkedPermissions">
            <el-checkbox class="block" v-for="item in permissions" :label="item.id" :value="item.id" :key="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitPer">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [{}],
      selected:'',
      curPage:1,
      totalCount:0,
      selectData:[],
      formInline:{},
      permissions:[],
      dialogTableVisible:false,
      dialogTableVisible2:false,
      formData:{
          name:''
        },
     mainImg:'',
     checkedPermissions:[],
     roleId:''
    }
  },
  filters:{
    formatDate(date){
      date=new Date(date);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var day=date.getDate();
      if(month<10){
        month='0'+month;
      }
      return year+'-'+month+'-'+day;
    }
  },
  methods:{
      submitPer(){
        this.$http.get(this.$store.state.httpApi + 'sysRolePermission/saveSysRolePermission?roleId='+this.roleId+'&perIds='+this.checkedPermissions).then(response =>{
          if(response.status == 200){
               this.$message.success("分配成功");
               this.dialogTableVisible2=false;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      },
      edit(data){
         if(this.$refs.ruleForm){
            this.$refs.ruleForm.resetFields();
          }
          this.dialogTableVisible=true;
          this.formData.name = data.name;
          this.formData.id=data.id;
      },
      edit2(data){
          this.roleId=data.id;
          this.$http.get(this.$store.state.httpApi + 'sysRolePermission/allPermission?sysRoleId='+data.id).then(response =>{
          if(response.status == 200){
              if(response.data.data){
                this.checkedPermissions=response.data.data;
              }else{
                this.checkedPermissions=[];
              }
              
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
          this.dialogTableVisible2=true;
          this.formData.id=data.id;
      },
      uploadSuccess(file){
          if(this.model=='mainImg'){
              this[this.model]=file.data[0];
          }else{
              this[this.model].push(file.data[0])
          }
      },
      onSubmit(){
            var flag=true;
            for (var j in this.formData){    
              if(this.formData[j]==''){
              flag=false;
            }
           } 
           if(flag){
            this.$http.post(this.$store.state.httpApi + (this.formData.id ?'sysRole/update':'sysRole/save'),this.formData).then(response =>{
              if(response.status == 200){
                  if(response.data.success == false){
                   this.$message.error("该类别已存在");
                  }else{
                   this.$message.success(this.formData.id ? '修改成功' : '创建成功');
                   this.dialogTableVisible=false;
                   this.getRows();
                  }
              }else{
                console.log('接口返回失败!',response);
              }
              },response => {
                console.log('请求失败',response)
              }) 
           }else{
             this.$message.error('您还有必填项还没有填！');
           }        
      },
      pulish(){
          this.formData.name = "";
          this.dialogTableVisible=true;
          
      },
      del(data){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id =data.id;
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'sysRole/del?id='+id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
					    this.getRows();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
       currentChange(page){
          this.curPage = page;
          this.getRows();
      },
      //上一页
      prevClick(page){
          this.curPage = page;
          this.getRows();
      },
    //  下一页
      nextClick(page){
          this.curPage = page;
          this.getRows();
      },
       getRows(){
          this.$http.get(this.$store.state.httpApi + 'sysRole/page?currentPage='+this.curPage+'&pageNumber='+10).then(response =>{
          if(response.status == 200){
          this.tableData=response.data.data.pp;
          this.totalCount = response.data.data.page.totalPage*10;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       },
       getPermissions(){
            this.$http.get(this.$store.state.httpApi + 'sysPermission/allData').then(response =>{
          if(response.status == 200){
          this.permissions=response.data.data;
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       }
  },
   created(){
    this.getRows();
    this.getPermissions();
  },
  computed: {
    httpApi(){
        return this.$store.state.httpApi
    },
    httpImgUrl(){
        return this.$store.state.httpImgUrl
    },
  },
  components: {
//使用编辑器
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .panel{
      display:inline-block;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .block{
      display:block;
      margin-left:0;
      margin-bottom: 10px;
    }
    .img{
        height:513px;
        width:917px;
        display:block;
        margin-bottom:20px;
    }
    .imglist{
        font-size:0;
    }
     .imglist li{
        width:100px;
        height:100px;
        display:inline-block;
        vertical-align: top;
        margin-right:10px;
        position:relative;
    }
    .imglist li img{
        width:100%;
        height:100%;
    }
     .upload{
        width:100%;
        height: 100%;
        box-sizing: border-box;
        border:1px solid #D9D9D9;
        font-size: 54px;
        text-align: center;
        // line-height: 200px;
        color: #D2D2D2;
        line-height:100px;
    }
    .upload img{
        width:100%;
        height: 100%;
    }
</style>
